<!--
 @Description 音频课程列表组件
 @author zhaoxingshun
 @date 2022/11/09
-->

<template>
  <section class="broadcast-index-page">
    <div id="broadcastList" class="broadcast-List">
      <div v-for="(item, i) in list" :key="i" class="broadcast-item" :class="[imgShape === 's' && 'square']">
        <div class="r-item-left" :style="{'width':imgWidth}">
          <div class="r-img" :style="{'height': height,'width':imgWidth}">
            <van-image :src="setImgPath(item.courseImg, item.courseImgUrl)" :fit="imgType">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
              <template v-slot:error>
                <img src="../../images/base/error-icon.png" alt>
              </template>
            </van-image>
          </div>
        </div>
        <div class="r-item-right">
          <div class="r-info">
            <div class="info-title clamp3">
              {{ item.courseName }}
            </div>
            <div class="info-total">
              <!-- 浏览人次：{{item.pageview || 0}} -->
            </div>
          </div>
          <div class="btn-box" :class="btnPosition?'justify-end':'justify-start'">
            <div class="r-btn">{{ btnName || '去听' }}</div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import Swiper from 'swiper/swiper-bundle.min.js'
import 'swiper/swiper-bundle.min.css'
import mixins from './../mixins'
import bannerMixins from './mixins'

export default {
  name: 'VBannerStyleOne',
  mixins: [mixins, bannerMixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imgShape: 's',
      swiper: null,
      clsList: [],
      list: [],
      defaultList: [
        {
          id: '1',
          carouselImg: '',
          carouselImgUrl: '',
          courseName: '课程1'
        },
        {
          id: '2',
          carouselImg: '',
          carouselImgUrl: '',
          courseName: '课程2'
        }
      ],
      page: 1,
      courseClassify: ''
    }
  },

  async created() {
    if (this.isInitData) {
      const result = await this.initData()
      //   this.clsList = result.clsList.data.data
      this.list = result.data?.rows
    } else {
      this.list = this.defaultList
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {

    init() {
      const ths = this
      this.swiper = new Swiper(this.$refs.vBannerSwiper, {
        pagination: {
          el: '#vBannerSwiperOne .swiper-pagination'
        },
        autoplay: this.isAutoPlay,
        delay: this.delayTime,
        observer: true,
        observeParents: true,
        on: {
          click: function(e) {
            ths.toDetail(e.clickedSlide.getAttribute('id'))
          }
        }
      })
    },
    refresh4other() {
      console.log()
    }
  }
}
</script>
  <style lang="scss">
  @import '@/styles/utility/rem.scss';
  .broadcast-index-page {
  height: 100vh;
  width: 100%;
  background: #f7f8f9;
  position: relative;
  .broadcast-List {
    position: absolute;
    top: rem(12);
    left: 0;
    right: 0;
    bottom: 0;
    background: #f7f8f9;
    padding: 0 rem(30);
    padding-bottom: rem(30);
    overflow: auto;
    .broadcast-item {
      margin-top: rem(20);
      display: flex;
      background-color: #fff;
      padding: rem(20);
      border-radius: rem(16);
      &.square {
        .r-item-left {
          width: rem(190);
        }
        .r-item-right {
          width: rem(432);
        }
      }
      .r-item-left{
          flex: 1;
          width: 0;
          display: flex;
          margin-right: rem(10);
          .r-img{
          position: relative;
          height: rem(190);
          .van-image {
            width: 100%;
            height: 100%;
            img{
              width: 100%;
              height: 100%;
              border-radius: rem(8);
            }
          }
        }
      }
      .r-item-right{
        width: rem(332);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .r-info{
          .info-title{
            font-size: rem(30);
            font-family: PingFang SC Medium, PingFang SC Medium-Medium;
            font-weight: bold;
            text-align: left;
            color: #333333;
          }
          .info-total{
            position: absolute;
            left: rem(20);
            right: rem(20);
            bottom: rem(15);
            font-size: rem(26);
            font-family: PingFang SC Regular, PingFang SC Regular-Regular;
            font-weight: 400;
            text-align: left;
            color: #666666;
          }
        }
        .btn-box{
          display: flex;
          .r-btn{
            display: flex;
            align-items: center;
            justify-content: center;
          min-width: rem(132);
          padding: rem(10) rem(30);
            height: rem(54);
            @include bg-color($mainColor);
            border-radius: rem(27);
            font-size: rem(24);
            font-family: PingFang SC Medium, PingFang SC Medium-Medium;
            font-weight: bold;
            text-align: center;
            color: #ffffff;
          }
        }
        .justify-start{
          justify-content: start;
        }
        .justify-end{
          justify-content: end;
        }
      }
    }
  }
}
  </style>

